import { Button, Dropdown, type MenuProps } from "antd";
import formatTime from "@/lib/utils/formatTime";
import ThreeDotsIcon from "@/assets/icons/three-dots.svg?jsx";

const menus: MenuProps["items"] = [
  {
    key: "aaa",
    label: "AAA",
  },
  {
    key: "bbb",
    label: "BBB",
  },
];

export default function Instance() {
  return (
    <div className="flex h-[120px] w-[250px] cursor-pointer flex-col rounded-lg border p-2 transition-colors duration-300 hover:bg-zinc-100">
      <div>标题</div>
      <div className="mt-2 text-sm">简介</div>
      <div className="mt-auto flex gap-x-4 text-sm">
        <span className="min-w-0 flex-auto truncate">
          {formatTime(new Date())}
        </span>
        <Dropdown menu={{ items: menus }} trigger={["click"]}>
          <Button type="text" size="small">
            <ThreeDotsIcon />
          </Button>
        </Dropdown>
      </div>
    </div>
  );
}
